<script setup lang="ts">

import { onMounted, reactive, ref } from 'vue'
import type { PageInfo, Result } from '@/tools/request'
import { Message, Modal } from '@arco-design/web-vue'
import type { SysPermission } from '@/api/system/sysPermission/sysPermission.d'
import {
  sysPermissionAdd,
  sysPermissionById, sysPermissionList,
  sysPermissionModify,
  sysPermissionRemove, sysPermissionRemoveBatch
} from '@/api/system/sysPermission/sysPermission'

//表单部分
const sysPermissionFormRef = ref()
const sysPermissionForm = reactive({
  //搜索表单
  query: {} as SysPermission,
  submitQuery: () => {
    sysPermissionList(sysPermissionForm.query, {
      pageNum: sysPermissionTable.pageInfo.pageNum,
      pageSize: sysPermissionTable.pageInfo.pageSize
      //@ts-ignore
    }).then((resp: Result<PageInfo<SysPermission>>) => {
        sysPermissionTable.pageInfo = resp.data
      }
    )
  },
  //新增修改表单
  form: {

    id: null,
    createTime: null,
    updateTime: null,
    createBy: null,
    delBy: null,
    del: null,
    remark: null,
    name: null,
    url: null,
    method: null
  } as SysPermission,
  submitForm: ({ values, errors }: any) => {
    if (errors) return
    //修改
    if (sysPermissionForm.form.id) {
      sysPermissionModify(sysPermissionForm.form).then(() => {
        Message.success('修改系统权限成功')
        sysPermissionForm.visible = false
        sysPermissionForm.submitQuery()
      })
      return
    }
    //新增
    sysPermissionAdd(sysPermissionForm.form).then(() => {
      Message.success('新建系统权限成功')
      sysPermissionForm.visible = false
      sysPermissionForm.submitQuery()
    })
  },
  //弹出层title
  formTitle: '新增系统权限',
  //是否显示新增修改表单
  visible: false
})

const sysPermissionTable = reactive({
  pageInfo: {} as PageInfo<SysPermission>,
  rowSelection: {
    type: 'checkbox',
    showCheckedAll: true,
    onlyCurrent: false
  },
  getList: (current: number) => {
    sysPermissionList(sysPermissionForm.query, {
      pageNum: current,
      pageSize: sysPermissionTable.pageInfo.pageSize
      //@ts-ignore
    }).then((resp: Result<PageInfo<SysPermissionTable>>) => {
      sysPermissionTable.pageInfo = resp.data
    })
  },
  selectKeys: [] as string[],
  batchDelete: () => {
    Modal.confirm({
      title: '警告',
      content: `确认删除系统权限【${sysPermissionTable.selectKeys}】吗？`,
      onOk(e) {
        sysPermissionRemoveBatch(sysPermissionTable.selectKeys!).then(() => {
          Message.success(`批量删除系统权限成功`)
          sysPermissionForm.submitQuery()
        })
      }
    })
  },
  add: () => {
    //新增系统权限
    sysPermissionFormRef.value!.resetFields()
    sysPermissionForm.formTitle = '新增系统权限'
    sysPermissionForm.visible = true
    sysPermissionForm.form.id = null
  },
  edit: (sysPermission: SysPermission) => {
    //编辑系统权限
    sysPermissionFormRef.value!.resetFields()
    sysPermissionForm.formTitle = '修改系统权限'
    sysPermissionForm.visible = true
    //@ts-ignore
    sysPermissionById(sysPermission.id!).then((resp: Result<SysPermission>) => {
      sysPermissionForm.form = resp.data
    })
  },
  delete: (sysPermission: SysPermission) => {
    //删除系统权限
    Modal.confirm({
      title: '警告！',
      content: `确认删除系统权限【${sysPermission.id}】吗？`,
      onOk(e) {
        sysPermissionRemove(sysPermission.id!).then(() => {
          Message.success(`删除系统权限【${sysPermission.id}】成功`)
          sysPermissionForm.submitQuery()
        })
      }
    })
  }
})

onMounted(() => {
  sysPermissionForm.submitQuery()
})


</script>

<template>
  <a-breadcrumb class="my-3">
    <a-breadcrumb-item>系统管理</a-breadcrumb-item>
    <RouterLink>
      <a-breadcrumb-item>权限管理</a-breadcrumb-item>
    </RouterLink>
    <a-breadcrumb-item>权限管理</a-breadcrumb-item>
  </a-breadcrumb>
  <a-layout-content>
    <a-card>
      <template #title>
        权限管理
      </template>

      <a-form ref="searchFormRef" :model="sysPermissionForm.query" label-align="left"
              @submit="sysPermissionForm.submitQuery"
              v-permission="'permission:sysPermission:list'"
      >
        <a-row :gutter="15" style="height: 32px">
          <a-col :span="6">
            <a-form-item field="name" label="权限名">
              <a-input v-model="sysPermissionForm.query.name"></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item field="remark" label="备注">
              <a-input v-model="sysPermissionForm.query.remark"></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-space>
              <a-button type="primary" html-type="submit">
                <template #icon>
                  <IconSearch />
                </template>
                搜索
              </a-button>
              <a-button @click="$refs.searchFormRef.resetFields()" type="secondary">
                <template #icon>
                  <IconRefresh />
                </template>
                重置
              </a-button>
            </a-space>
          </a-col>
        </a-row>
      </a-form>
      <a-divider :margin="16"></a-divider>
      <a-space class="mb-3">
        <a-button type="primary" @click="sysPermissionTable.add" v-permission="'permission:sysPermission:create'">
          <template #icon>
            <IconPlus />
          </template>
          新建
        </a-button>
        <a-button class="removeBtn" @click="sysPermissionTable.batchDelete"
                  v-permission="'permission:sysPermission:batchDelete'">
          <template #icon>
            <IconDelete />
          </template>
          删除
        </a-button>
        <a-button class="removeBtn" @click="sysPermissionTable.getList" v-permission="'permission:sysPermission:list'">
          <template #icon>
            <IconRefresh />
          </template>
          刷新
        </a-button>
      </a-space>

      <a-table row-key="id" :data="sysPermissionTable.pageInfo.list"
               :row-selection="sysPermissionTable.rowSelection"
               v-model:selected-keys="sysPermissionTable.selectKeys" :pagination="false">
        <template #columns>
          <a-table-column data-index="id" title="ID" />
          <a-table-column data-index="name" title="权限名" />
          <a-table-column data-index="url" title="访问路径" />
          <a-table-column data-index="method" title="访问方法" />
          <a-table-column data-index="createTime" title="创建时间" />
          <a-table-column data-index="remark" title="备注" />

          <a-table-column title="操作" width="200">
            <template #cell="{record}">
              <a-space>
                <a-button @click="sysPermissionTable.edit(record)" type="text"
                          v-permission="'permission:sysPermission:update'">
                  <template #icon>
                    <IconEdit />
                  </template>
                  编辑
                </a-button>
                <a-button @click="sysPermissionTable.delete(record)" type="text"
                          v-permission="'permission:sysPermission:delete'"
                          class="text-danger">
                  <template #icon>
                    <IconDelete />
                  </template>
                  删除
                </a-button>
              </a-space>
            </template>
          </a-table-column>
        </template>
      </a-table>

      <div class="d-flex justify-content-end mt-2">
        <a-pagination :total="sysPermissionTable.pageInfo.total" :page-size="sysPermissionTable.pageInfo.pageSize"
                      :current="sysPermissionTable.pageInfo.pageNum"
                      @change="sysPermissionTable.getList" class="mt-3"></a-pagination>
      </div>

      <a-modal :title="sysPermissionForm.formTitle" title-align="start"
               v-model:visible="sysPermissionForm.visible"
               :footer="null">
        <a-form ref="sysPermissionFormRef" :model="sysPermissionForm.form"
                @submit="sysPermissionForm.submitForm">

          <a-form-item field="name" hide-asterisk label="权限名"
                       :rules="[{ required: true,message: '权限名不能为空！' }]"
                       validate-trigger="blur">
            <a-input v-model="sysPermissionForm.form.name"></a-input>
          </a-form-item>
          <a-form-item field="url" hide-asterisk label="访问路径"
                       :rules="[{ required: true,message: '访问路径不能为空！' }]"
                       validate-trigger="blur">
            <a-input v-model="sysPermissionForm.form.url"></a-input>
          </a-form-item>
          <a-form-item field="method" hide-asterisk label="访问方法"
                       :rules="[{ required: true,message: '访问方法不能为空！' }]"
                       validate-trigger="blur">
            <a-input v-model="sysPermissionForm.form.method"></a-input>
          </a-form-item>
          <a-form-item field="remark" hide-asterisk label="备注"
                       validate-trigger="blur">
            <a-input v-model="sysPermissionForm.form.remark"></a-input>
          </a-form-item>

          <a-form-item>
            <a-button type="primary" html-type="submit">提交</a-button>
          </a-form-item>
        </a-form>
      </a-modal>
    </a-card>
  </a-layout-content>
</template>

<style scoped lang="scss">
</style>
